<template>
  <el-card>
    <el-space :size="30">
      <el-select
        v-model="categoryStore.c1Id"
        style="width: 240px"
        placeholder="一级属性"
        @change="handler1"
        :disabled="scene == 1 ? true : false"
      >
        <el-option
          v-for="c1 in categoryStore.c1Arr"
          :key="c1.id"
          :label="c1.name"
          :value="c1.id"
        ></el-option>
      </el-select>
      <el-select
        style="width: 240px"
        placeholder="二级属性"
        v-model="categoryStore.c2Id"
        @change="handler2"
        :disabled="scene == 1 ? true : false"
      >
        <el-option
          v-for="c2 in categoryStore.c2Arr"
          :key="c2.id"
          :label="c2.name"
          :value="c2.id"
        ></el-option>
      </el-select>
      <el-select
        style="width: 240px"
        placeholder="三级属性"
        v-model="categoryStore.c3Id"
        :disabled="scene == 1 ? true : false"
      >
        <el-option
          v-for="c3 in categoryStore.c3Arr"
          :key="c3.id"
          :label="c3.name"
          :value="c3.id"
        ></el-option>
      </el-select>
    </el-space>
  </el-card>
</template>

<script setup lang="ts">
  import { onMounted } from 'vue'
  import { useCategoryStore } from '@/store/modules/category'

  //获取商品分类相关的小仓库实例
  let categoryStore = useCategoryStore()

  defineProps(['scene'])

  onMounted(() => {
    getC1()
  })

  const getC1 = () => {
    categoryStore.getCategory1()
  }

  const getC2 = () => {
    categoryStore.getCategory2()
  }

  const getC3 = () => {
    categoryStore.getCategory3()
  }

  const handler1 = () => {
    //清空二级三级分类相关数据，二级分类只需清除id
    categoryStore.c2Id = ''
    categoryStore.c3Arr = []
    categoryStore.c3Id = ''
    getC2()
  }

  const handler2 = () => {
    //清除三级分类的id
    categoryStore.c3Id = ''
    getC3()
  }
</script>

<style scoped></style>
